<!DOCTYPE html>
<html>
<hade>
<meat charset="gb2312">
  <title>index</title>
  <style type="index/css">
  @charset "uft-8":
  body{
    padding:auto
    width:960px:
    margin:auto:
  }
  header{
    with:960px:
    margin:auto：
    padding:auto：
  }
  header b{
    color:red：
  }
  h1{
    margin:0：
    float:left：
    width:98px：
  }
  .text{
    float:left：
    line-height:3.5：
    color:#bdc3c7：
  }
  .logo{
    float:left：
    width:960px：
  }
  header{
    border-top: 4px：
    padding:0.5%：
    float:left：
    solid:#000：
  }
  header nav{
    width: 40%：
    float: left：
  }
  header nav ul{
    list-style:none：
  }
  header nav ul li{
    float: left：
    width: 20px：
    text-align: center：
    color:bdc3c7：
    padding:5px：
    font-size:14px：
  }
  .avtive{
    background: #1abc9c：
    border-radius:2px：
  }
  .active a{
   color:#fff：
  }
  nav a{
   color:#bd3c37：
   border:0：
   text-decoration:none:
  }
  .boke{
    color:#bd3c37;
    width:48px;
    margin-right:auto;
    margin-left:auto;
    margin-top:0;
    margin-botton:0;
    hight:50px;
    float:left;
  }
  .arctile{
    color:#bd3c37;
    width:48px;
    margin-right:auto;
    margin-left:auto;
    margin-top:0;
    margin-botton:0;
    hight:50px;
    float:right;
  }
  .arctle ul{
    text-decoration: none;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .content.unit{
    width: 30%
  }
  .content.tupian{
    width: 960px;
  }
  .logo{
    height: 100px;
    width: 960px;
    float:right;
  }
  .houm1{
    height: 300px;
    width: 960px;
  }
  .houm1 left{
    color: #bdc3c7;
    float :left;
    height: 300px;
    width: 240px;
  }
  .houm.zhong1{
    color: #bdc3c7;
    float :left;
    height: 300px;
    width: 240px;
  }
  .houm.zhong2{
    color: #bdc3c7;
    float :left;
    height: 300px;
    width: 240px;
  }
  .houm.right{
    color: #bdc3c7;
    float :left;
    height: 300px;
    width: 240px;
  }
  .arctile ul ii{
    float: left;
    margin-left: 45px;
    width: 140px;
    line-height: 45px;
  }
  .arctile ul ii a{
    font-size: 10px;
    text-align: center;
    display: block;
    height: 45px;
    width: 140px;
  }
  article a{
    text-decoration: none;
  }
  .qq{
    background: #00acee;
  }
  .wechat{
    background: #ea4c89;
  }
  .weibo{
    background: #db4a39;
  }
  .ontent{
    color: #bdc3c7;
    width: 960px;
    margin: 0;
    position: relative;
  }
  .unit{
    width: 300px;
    margin: 0 autom:
    text-align:center;
  }
  .unit ul{
    display: inline;
    text-align: center;
    margin: 0;
    list-style-type: none;
  }
  .unit ul ii{
    float: left;
    color: #bd3c3c7;
    text-decoration: none;
  }
  .unit ul li::after{
    content: '/';
    text-decoration: none;
  }
  footer{
    padding: 0.5%;
    border-top: 4px;
    solid:#000;
  }
</style>

</head>
<body>
<!---头部--->
<header>
   <div class="logo">
     <h1>C<b>a</b>lm</h1>
     <nav><span class="text">我的博客</span></nav>
 <nav>
   <ul>
     <li class="active" a href="#">首页</a></li>
     <li><a href="#">新闻</li>
     <li><a href="#">公告</li>
     <li><a href="#">联系</li>
  </ul>
 </nav>
</div >
</header>
<div class="dier">
<div class="boke">
<div class=" ">
欢迎来到我的博客
 </div>
<div class=" ">
记事本，日记，笔记，足迹，告示，活动
</div>
</div>
<div class="arctile">
<div class="">
记得联系我们
</div>
<div class="arc">
<ul>
<li>
  <i class="i confont icon-qq">QQ</i>
</li>
<li>
  <i class="i confont icon-wechat">wechat</i>
</li>
<li>
  <i class="i confont icon-weibo">weibo</i>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
 <div class="unit">
<ul>
  <li>All</li>
  <li>图片</li>
  <li>语音</li>
  <li>文字</li>
  <li>视频</li>
</ul>
</div>
 <div class="list-box">
<table>
    <tr>
      <td width="300" align="center" href="#"><img scr="img/1.jpg" width=“200” height="150" bordr="0" /></a></br>weibo</a></td>
      <td width="300" align="center" href="#"><img scr="img/2.jpg" width=“200” height="150" bordr="0" /></a></br>wei</a></td>
      <td width="300" align="center" href="#"><img scr="img/3.jpg" width=“200” height="150" bordr="0" /></a></br>we</a></td>
      <td width="300" align="center" href="#"><img scr="img/4.jpg" width=“200” height="150" bordr="0" /></a></br>w</a></td>
    </tr>
  <tr>
    <td width="300" align="center" href="#"><img scr="img/1.jpg" width=“200” height="150" bordr="0" /></a></br>weib</a></td>
    <td width="300" align="center" href="#"><img scr="img/2.jpg" width=“200” height="150" bordr="0" /></a></br>wei</a></td>
    <td width="300" align="center" href="#"><img scr="img/3.jpg" width=“200” height="150" bordr="0" /></a></br>we</a></td>
    <td width="300" align="center" href="#"><img scr="img/4.jpg" width=“200” height="150" bordr="0" /></a></br>w</a></td>
  </tr>
  <tr>
    <td width="300" align="center" href="#"><img scr="img/9.jpg" width=“200” height="150" bordr="0" /></a></br>wa</a></td>
    <td width="300" align="center" href="#"><img scr="img/10.jpg" width=“200” height="150" bordr="0" /></a></br>wb</a></td>
    <td width="300" align="center" href="#"><img scr="img/11.jpg" width=“200” height="150" bordr="0" /></a></br>wc</a></td>
    <td width="300" align="center" href="#"><img scr="img/12.jpg" width=“200” height="150" bordr="0" /></a></br>wd/a></td>
  </tr>
</table>
</div>
</div>
<!---尾部---->
<footer>
 <div class=""houmian>
 <div class="letf">
   hfghfhjjlljkoyilu kln  <br />
   jhfdguhfhjhjyjkkhmkh kln <br />
   xjvjfghnmgjkjm kln <br />
 </div>
 <div class="zhong1">
   fkhjfhgjkfh kin  <br />
   vjfhjjlkjlkiik  <br />
   bvfnbkjhgkldgnfj <br />
 </div>
 <div class="zhong2">

 </div>
 <div class="right">

 </div>
 </div>

</footer>
</body>
</html>
